<template>
  <div class="reportPage">
   	<div class="top"> 
			<img src="@as/img/zuzhi_wode_jb@2x.png" alt=""> 
		</div>
		<div class="list">
			<div class="content">
				<mu-form ref="reportForm" :model="validateForm">
					<mu-form-item >
						<div class="label">
							问题类别
						</div>
						<div class="selectBox">
							<p class="selectCountp">
								{{validateForm.select}}
								<!--<span class="iconshuju_icon_xiala iconfont"></span>-->
								<!--<mu-select  v-model="validateForm.select">-->
									<!--<mu-option v-for="item in options" :key="item" :label="item" :value="item"></mu-option> -->
									<!---->
								<!--</mu-select>-->
							</p>
						</div>
					</mu-form-item>
					<mu-form-item prop="title" :rules="titleRules" class="textArea-lable">
						<div class="label">
							标题
						</div>
						<mu-text-field
							placeholder="请输入标题" 
							solo
							class="input"
							v-model="validateForm.title"
							prop="title"
						></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="content" :rules="contentRules">
						<div class="label">
							内容
						</div>
						<mu-text-field
							placeholder="200字以上，500字以内"
							multi-line
							solo
							class="input"
							v-model="validateForm.content"
							prop="content"
						></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="corporation" :rules="corporationRules">
						<div class="label">
							问题所属公司
						</div>
						<mu-text-field
							placeholder="请输入问题所属公司"
							solo
							class="input"
							v-model="validateForm.corporation"
							prop="corporation"
						></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="reflect" :rules="reflectRules">
						<div class="label">
							被反映对象
						</div>
						<mu-text-field
							placeholder="请输入被反映部门名称"
							solo
							class="input"
							v-model="validateForm.reflect"
							prop="reflect"
						></mu-text-field>
					</mu-form-item>
					<mu-form-item prop="jobTitle" :rules="jobTitleRules">
						<div class="label">
							职称
						</div>
						<mu-text-field
							placeholder="请输入职称"
							solo
							class="input"
							v-model="validateForm.jobTitle"
							prop="jobTitle"
						></mu-text-field>
					</mu-form-item>
				</mu-form>
				<div class="label">
					上传附件
				</div>
				<div class="upload">
					<div class="imgBlock">
						<div v-for="(item,index) in imgList" :key="index" class="img">
								<img :src="item.enclosure_address" alt  onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'" v-if="item.type==1">
								<video id="video" v-if="item.type==2">
									<source :src=item.enclosure_address>
								</video>
							<i @click="deletePic(index)">
								<img src="@as/img/wode_delete.png" alt>
							</i>
						</div>
						<div class="uploader" v-if="imgList.length<4">
							<input type="file" accept="image/*,video/*" value="上传视频文件" @change="onRead($event)">
						</div>
					</div>
			</div>
				<p class="tips">*最多上传4个附件，仅限图片或视频，单个附件大小不超过50M</p>
			</div>
			<div class="btn" @click="submit()">
				<span>确认</span>
			</div>
		</div>
  </div>
</template>

<script>
	import axios from 'axios';
	export default {
			data() {
				return {
          eid:'',
					qiniuData: {
						token: '',
						key: ''
					},
					
					refreshing: false,
					loading: false,
      		imgList: [],
					validateForm: {
						select: '',//问题类别
						title: '',//标题
						content: '',//举报内容
						corporation:'',//所属公司
						reflect:'',	//被反映对象
						jobTitle:'',//职称
					},
					companyName:'',
					options: [],
					// categoryRules: [
					// 	{ validate: (val) => !!val, message: '请选择问题类别' }
					// ],
					titleRules: [
						{ validate: (val) => !!val, message: '请输入举报标题' }
					],
					contentRules: [
						{ validate: (val) => !!val, message: '请输入内容' }
					],
					corporationRules: [
						{ validate: (val) => !!val, message: '请输入所属公司' }
					],
					reflectRules: [
						{ validate: (val) => !!val, message: '请输入被反映对象' }
					],
					jobTitleRules: [
						{ validate: (val) => !!val, message: '请输入职称' }
					],
				}
			},
			mounted() {
				this.$progress.done();
			},
			methods: {
				S4() {
					return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				},
				guid() {
					return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4());
				},
				onRead(e) {
					// debugger
					let file = e.target.files[0];
					console.log(file);
					if(file.size/1024/1024>50){
						this.$toast.error('上传的文件最大不能超过50M')
						return  false
					}
					if(file.type.indexOf('image')>-1
						||file.type.indexOf('video')>-1){
                        this.qiniuData.key = this.guid();
                        console.log(this.qiniuData.key)
                        this.qiniuData.file = file;
                        let param = new FormData(); //创建form对象
                        param.append('chunk','0');//断点传输
                        param.append('chunks','1');
                        param.append('file',file,file.name)
                        param.append('token',this.qiniuData.token)
                        param.append('key',this.qiniuData.key)

                        const url = `https://up-z2.qiniup.com`
                        axios.post(url,param,{headers: {'Content-Type':'multipart/form-data'}}).then(res=>{
                            console.log(res)
                            let pic = `https://media.71ydj.com/${res.data.key}`;
                            console.log(pic)
                            this.imgList.push({
                                enclosure_address:pic,
                                type:(file.type.indexOf('image')>-1)?1:
                                    ((file.type.indexOf('video')>-1)?2:3)
                            })
                        })
					}else{
                        this.$toast.error('上传的文件格式不支持')
                        return  false
					}
				},
				getToken() {
					const url = `index/index/qiniu`
					this.$http.post(url).then(res => {
						this.qiniuData.token = res.data.token
					})
				},
				deletePic(i){
					this.imgList.splice(i,1)
				},
				// 提交
				submit() {
					let that = this;
					that.$refs.reportForm.validate().then((result) => { 
						if (result) {
							let params = {
								class_id:that.eid,
								reported_company:that.validateForm.corporation,
								title:that.validateForm.title,
								content:that.validateForm.content,
								the_informant:that.validateForm.reflect,
								rank:that.validateForm.jobTitle,
								enclosure:JSON.stringify(that.imgList),
								org_id:JSON.parse(Cookies.get('user_71ydj')).organization_id,
							}
							const url = `app/report/report_details`
							that.$http.post(url, params).then(res => {
								if (res.code === 200) {
									that.$toast.success(res.msg);
                                    // /organization
                                    // this.$router.push('/organization');
                                    this.$router.replace({
                                        path:'/organization'
                                    });
                                    // this.$router.go(-2);
								} else {
									that.$toast.error(res.msg);
								}
							})
						}
					});
				},
			},
			created(){
				this.getToken();
				this.validateForm.select = this.$route.query.class_name;
				this.eid = this.$route.query.id;
				this.options.push(this.$route.query.class_name)
			}
	}
</script>
<style lang="scss" scoped>
.reportPage{
	input, textarea, button {
		outline: none;
	}
	/deep/ .mu-input-content{
		border:1px solid #ddd;
		border-radius: 5px;
		height:40px;
		font-size: 14px;
		padding-left: 20px;
	}
	/deep/ .mu-form-item{
		margin-bottom: 15px;
		min-height:0;
		padding-bottom: 0;
	}
 .top{
		width:100%;
		height:211.5px;
		overflow: hidden;
		position: relative;
		z-index: 10;
		img{
			width:100%;
			height:100%;
		}
	}
	.list{	
		width:100%;
		padding: 15px 15px;
		box-sizing: border-box;
		justify-content: center;
		position: absolute;
		left:0;
		top:175px;
		.content{
			width:100%;
			padding: 38px 15px 30px 15px;
			box-shadow: 0px 6px 10px 2px #f1f1f1;
			display: flex;
			flex-direction: column;
			.label{
				font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:#333333;
				margin-bottom: 8px;
				i{
					font-style: normal;
					color:rgba(235,77,68,1);
					margin-right: 5px;
				}
				span{
					font-size:10px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(153,153,153,1);
				}
			}
			.fj{
				margin-top: 10px;
			}
			input,textarea{
				width: 100%;
				box-sizing: border-box;
				height:40px;
				/*background:rgba(255,255,255,1);*/
				/*border:1px solid rgba(221,221,221,1);*/
				border-radius:4px;
				font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				padding: 0 20px;
				outline: 0;
				&::placeholder{  
					color:rgba(204,204,204,1);
				}
			}
			textarea{
				padding: 14px 15px;
				height: 200px !important;
			}
			// .imgBlock {
			// 	display: block;
			// 	margin-top: 5px;
			// 	input {
			// 		width: 100px;
			// 		height: 100px;
			// 		border-radius: 4px;
			// 		opacity: 0;
			// 		padding: 0 !important;
			// 		position: absolute;
			// 		left: 0;
			// 		top: 0; 
			// 	}
			// 	.img {
			// 			position: relative;
			// 			display: inline-block;
			// 			width: 100px;
			// 			height: 100px;
			// 			/*background: red;*/
			// 			margin-right: 11px;
			// 			border-radius: 4px;
			// 		> img {
			// 			width: 100px;
			// 			height: 100px;
			// 			border-radius: 4px;
			// 		}
			// 		.imgBlock img:nth-of-type(3n) {
			// 				margin: 0
			// 		}
			// 		i {
			// 			z-index: 99;
			// 			position: absolute;
			// 			top: -7px;
			// 			right: -7px;
			// 			width: 20px;
			// 			height: 20px;
			// 		}
			// 		img {
			// 			display: block;
			// 			width: 100%;
			// 			height: 100%;
			// 		}
			// 	}
			// 	.uploader {
			// 		display: inline-block; 
			// 		width: 100px;
			// 		height: 100px;
			// 		border-radius: 4px;
			// 		background: url("../../../../assets/img/add_photo.png") center no-repeat;
			// 		background-size: 100% 100%;
			// 		position: relative;
			// 	}
			// }
			.tips{
				font-size:12px;
				color: #999;
			}
			.ts{
				font-size: 13px;
				color: #999 !important;
			}
			.fjs{
				width:100%;
				display: flex;
				flex-direction: column;
				padding: 3px 0;
				.fjbox{
					width:100%;
					display: flex;
					align-items: center;
					margin-bottom: 5px;
					img{
						width:17px;
						height:16.5px;
					}
					.fjname{
						width:80%;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						display: flex;
						align-items: center;
						margin-top: 3px;
						a{
							text-decoration:none; 
							font-size: 13px;
							color: #999 !important;
							display: inline-block;
							line-height: 1.2;
							overflow: hidden;
							padding: 0;
							text-overflow:ellipsis;
							white-space: nowrap;
							margin-left: 5px;
						}
					}
					
				}
			}
			.md{
				width:100%;
				display: flex;
				flex-direction: column;
				margin-top: 15px;
				.step{
					width:100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.label{
						font-size:16px;
						font-family:PingFang-SC-Medium;
						font-weight:500;
						color:#333333;
						margin-bottom: 8px;
					}
					div{
						display: flex;
						align-items: center;
						span{
							font-size: 12px;
							color:#999;
						}
						img{
							width:10px;
							height:8.5px;
							margin-left: 3px;
						}
					}
				
				}
				.name{
					width:100%;
					border:1px solid #ddd;
					padding: 10px 15px;
					border-radius: 8px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					margin-top: 10px;
					span{
						font-size: 12px;
						color: #666;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.name .w span::after{
					content: "、";
				}
				.names{
					width:100%;
					border:1px solid #ddd;
					padding: 10px 15px;
					border-radius: 8px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					margin-top: 10px;
					span{
						font-size: 12px;
						color: #666;
					}
				}
			}
			// .names .w span::not(:last-child)::after{
			// 	content: "、";
			// }
			.selectBox{
				width:100%;
				.selectCountp{
					width:100%;
					border:1px solid #ddd;
					border-radius: 5px;
					height:40px;
					font-size: 14px;
					color: #666;
					padding: 0 15px;
					position: relative;
					display: flex;
					align-items: center;
					.mu-input{
						position: absolute;
						left: 0;
						top:0;
						width: 100%;
						height: 100%;
						opacity: 0;
						border:1px solid red;
					}
					.iconfont{
						color: #ccc;
						font-size: 14px;
						position: absolute;
						right: 15px;
						top:50%;
						transform: translateY(-50%);
					}
				}
			}
		}
		.btn{
			width:100%;
			height:44px;
			margin-top: 68px;
			background: #eb4d44;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
				span{
				font-size: 16px;
				color: #fff;
			}
		}
	}	
	 .imgBlock {
			display: block;
			margin-top: 5px;
    }

    .imgBlock input {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        opacity: 0;
        padding: 0 !important;
        position: absolute;
        left: 0;
        top: 0; 
    }

    .imgBlock .img {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 90px;
        margin-right: 11px;
        border-radius: 4px;
				// border:1px solid red;

				// overflow: hidden;
    }
		// /deep/ #view{
		// 	position: relative;
		// 	display: inline-block;
		// 	width: 100px;
		// 	height: 100px;
		// 	margin-right: 11px;
		// 	border-radius: 4px;
		// 	border:1px solid green;
		// 	overflow: hidden;
		// }
		/deep/ .imgBlock  .img video{
			width: 100px;
			height: 100px;
			border-radius: 4px;
			overflow: hidden;
			// border:1px solid green;
		}
    .imgBlock > img {
        width: 100px;
        height: 100px;
        border-radius: 4px;
    }

    .imgBlock img:nth-of-type(3n) {
        margin: 0
    }

    .imgBlock .img i {
        z-index: 99;
        position: absolute;
        top: -7px;
        right: -7px;
        width: 20px;
        height: 20px;
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .uploader {
        display: inline-block; 
        width: 100px;
        height: 100px;
        border-radius: 4px;
        background: url("../../../../assets/img/add_photo.png") center no-repeat;
        background-size: 100% 100%;
        position: relative;
		input{
			width: 100%;
			height: 100% !important;
		}
    }

	
}
</style>
